import React from 'react';
import {Outlet, NavLink} from 'react-router-dom';
import styled from 'styled-components';

const ListStyle = styled.div`
    height: 93vh;
    display: flex;
    .list-nav {
        width: 200px;
        border-right: 1px solid #ccc;
    }
    .list-view {
        flex:1
    }
    a{
        margin-top:20px;
        display: block;
        text-decoration: none;
        &.active {
            color:gold;
        }
    }
`
const List = () => {
    return <>
        {/* <h3>列表</h3> */}
        <ListStyle>
            <div className='list-nav'>
                <NavLink to='news'>新闻列表</NavLink>
                <NavLink to='music'>音乐列表</NavLink>
            </div>


            <div className='list-view'>
                <Outlet />
            </div>
        </ListStyle>
        
    </>

}


export default List;